<template>
  <div class="war">
    <div class="area-center">
      <head-page @back="back" :title="info.interviewTitle" id="back"></head-page>
      <div
        v-if="type != '56d45c53-a726-464e-a1b9-40fb2421edbd'"
        class="richText bold-size"
        v-html="info.interviewText"
      ></div>
      <div v-else>
        <video
          class="mp4"
          x5-video-orientation="landscape"
          preload="auto"
          controls
          :src="imgurl + info.interviewText"
        ></video>
      </div>
    </div>
  </div>
</template>
<script>
import { interviewTitle } from "@/api/index";
export default {
  components: {},
  props: {},
  data() {
    return {
      info: "",
      type: this.$route.query.type,
    };
  },
  mounted() {
    interviewTitle({
      id: this.$route.query.id,
    }).then((res) => {
      if (res.data.code == 200) {
        this.info = res.data.data;
        if (this.type != "56d45c53-a726-464e-a1b9-40fb2421edbd") {
          this.info.interviewText = this.dataHTML(res.data.data.interviewText);
        }
      }
    });
  },
  methods: {
    back() {
      let videoItem = document.getElementsByClassName("mp4");
      if (videoItem && videoItem.length) {
        videoItem.pause();
      }
    },
  },
};
</script>
<style scoped>
.wrapper {
  width: 100%;
}
.mp4 {
  width: 100%;
  max-height: 3rem;
}
</style>